<template>
	<view class="content" style="height: 100vh;">
		<mescroll-uni :fixed="false" height="100%" ref="mescrollRef" @init="mescrollInit" :up="upOption"
			@down="downCallback" @up="upCallback">
			<uni-list :border="true">
				<uni-list-chat v-for="(item, index) in list" :key="index" :title="item.title" :avatar="item.avatar"
					:note="extractText(item.content)" :time="formatCreateTime(item.createTime)" @click="toDetail(item)"
					:clickable="clickable" badge-positon="left" badge-text="dot"
					:showBadge="!item.ifRead"></uni-list-chat>
			</uni-list>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	import mEmptyData from '@/components/m-empty-data/m-empty-data.vue';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		formatDate
	} from '@/common/date';
	export default {
		mixins: [MescrollMixin],
		components: {
			mEmptyData
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				clickable: true,
				list: [],
				upOption: {
					onScroll: true,
					auto: false, // 不自动加载
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '空空如也', // 提示
						icon: 'http://cdn.uviewui.com/uview/empty/data.png'
					}
				}
			};
		},
		onLoad() {},
		onShow() {},
		methods: {

			extractText(text) {
				const regex = /<[^>]+>/g; // 匹配HTML标签的正则表达式
				return text.replace(regex, ''); // 使用replace方法去除HTML标签
			},

			async getNoticeList(pageNo, pageSize) {
				let param = {
					pageNo: pageNo,
					pageSize: pageSize
				};
				if (this.hasLogin) {
					param.userId = this.userInfo.id
				}
				let res = await this.$apis.getNoticeList(param);
				console.log('getNoticeList===', res);
				if (pageNo == 1) {
					this.list = [];
				}
				if (res) {
					let data = res.records;
					this.list = this.list.concat(data);
					this.mescroll.endSuccess(res.records.length);
				}
			},

			toDetail(item) {
				console.log(item);
				this.$mRouter.push({
					route: this.$mRoutesConfig.noticeDetail,
					query: {
						id: item.id
					}
				});
			},

			formatCreateTime(time) {
				if (time == null || time === '') {
					return null;
				}
				let str = time.replace(/-/g, '/');
				let date = new Date(str);
				return formatDate(date, 'MM-dd hh:mm');
			},

			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.mescroll.endSuccess(2);
				this.getNoticeList(page.num, page.size);
			},
		}
	};
</script>

<style lang="scss">
	.loading {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;

		text {
			color: $font-color-666;
		}
	}
</style>